window.addEvent('domready', function() {
	//
    // Set up our dynamic navigation menu
    //

	// define variables
	var menus = $$(".navMenu");
	var slides = new Array();
	
	// define animation effects
	var title_fx = new Fx.Elements($$(".navMenu .navMenuTitle"), {wait: false, duration:500});
	var body_fx = new Fx.Elements($$(".navMenu .navMenuBody"), {wait: false, duration: 500});
	var title_fx_css = {}
	var body_fx_css = {}
	
	// set default css
	menus.each( function (m, i) {
		title_fx_css[i] = {color: "7997b1"};
		body_fx_css[i] = {opacity: 0};
	});
	
	//slide ins
	menus.each(function (m, i) {
		var t = m.getElement(".navMenuTitle");
		var b = m.getElement(".navMenuBody");
		
		slides[i] = new Fx.Slide(b);
		slides[i].slideOut();
	
		t.addEvent('mouseenter', function(e) {	
			slides[i].slideIn();
			var bfx = {};
			var tfx = {};
		
			slides.each( function(slide, j) {
				if (i != j) {
					slide.slideOut() 
					bfx[j] = {opacity: 0}
					tfx[j] = {color: "7997b1"}
				} else {
					bfx[j] = {opacity: 1}
					tfx[j] = {color: "ffffff"}
				}
				
				body_fx.start(bfx);
				title_fx.start(tfx);
			});
		});
    });

	// slide out event
	$("navCtr").addEvent('mouseleave', function(e) {
		var bfx = {};
		var tfx = {};
		
		slides.each( function(slide, j) {
			slide.slideOut();
			bfx[j] = {opacity: 0}
			tfx[j] = {color: "7997b1"}
		});
				
		body_fx.start(body_fx_css);
		title_fx.start(title_fx_css);
	});
});
